<template>
  <main>
    <Row>
      <left-module 
        :blogList="blogList"
        :totalBlog="totalBlog"
        :currentPage="currentPage"
        :pageSize="pageSize"
        @changePage="changePage"
      ></left-module>
      <right-module></right-module>
    </Row>
  </main>
</template>

<script>
import Masthead from 'components/masthead/Masthead'
import { findBlogList } from 'service'

export default {
  name: 'Home',
  data() {
    return {
      imgUrl: 'http://cdn.yozora.top/image/home.png',
      page: 1,
      totalBlog: 0,
      currentPage: +this.$route.params.pageIndex || 1,
      pageSize: 12,
      blogList: [],
      flag: true
    }
  },
  created() {
    this.getBlogList()
  },
  methods: {
    async getBlogList() {
      let res = await findBlogList(this.currentPage, this.pageSize)
      if (res.data.statusCode === 200) {
        this.blogList = res.data.data.list
        this.totalBlog = res.data.data.total
      } else {
        this.$router.push({ name: 'error' })
      }
    },
    async changePage(currentPage) {
      this.currentPage = currentPage
      await this.getBlogList()
      this.flag = false
      if (currentPage === 1) {
        this.$router.push({ name: 'home' })
      } else {
        this.$router.push({ name: 'homePage', params: { pageIndex: currentPage } })
      }
    }
  },
  watch: {
    $route(to, from) {
      if (this.flag) {
        this.currentPage = +to.params.pageIndex || 1
        this.getBlogList()
      }
      this.flag = true
    }
  },
  components: {
    Masthead,
    "left-module": () => import("components/homePage/LeftModule"),
    "right-module": () => import("components/homePage/RightModule"),
  }
}
</script>

<style lang='scss' scoped>
</style>
